<template>
  <div class="app-main">
    <div class="compTitle">会员中心</div>
    <div class="itemTitle">会员等级：Pro</div>
    <div class="itemTitle">会员余额：￥100.23</div>
    <div class="itemTitle">交易记录</div>
    <div class="tableContent">
      <el-table :data="tableData" border style="width: 100%;height: 255px;">
        <el-table-column prop="date" label="Date" />
        <el-table-column prop="amount" label="Amount" />
        <el-table-column prop="description" label="Description" />
      </el-table>
    </div>
    <div class="itemTitle">付款方式</div>
    <div class="itemTitle">We offer a variety of payment methods to suit your convenience. Choose the one that works
      best for you.</div>
    <div class="card-container">
      <el-card v-for="(card, index) in cardList" :key="index" class="card-item">
        <div class="card-header">
          <div class="card-title"><span>{{ card.title }}</span><div v-if="card.isRecommended" class="recommended">Recommended</div></div>
          <div class="card-price"><span style="font-size: 30px;font-weight: bolder;color: black;">{{ card.price
              }}</span> /month</div>
          <div class="card-action">{{ card.action }}</div>
        </div>
        <div class="card-content">
          <div v-for="(feature, fIndex) in card.features" :key="fIndex" class="card-feature">
            <el-icon>
              <Check />
            </el-icon>
            {{ feature }}
          </div>
        </div>
      </el-card>
    </div>
    <div class="payList">
      <template v-for="item in payTypeList">
        <div class="payItem">
          <div class="payIcon">
            <component :is="item.iconName" size="35" strokeWidth="2"></component>
          </div>
          <div class="payContent">
            <div class="payTitle">{{ item.title }}</div>
            <div class="payContent">{{ item.content }}</div>
          </div>
        </div>
      </template>

    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'MemberCenter',
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          amount: '+$200.00',
          description: 'Payment received',
        },
        {
          date: '2016-05-02',
          amount: '-$50.00',
          description: 'Usage charge',
        },
        {
          date: '2016-05-04',
          amount: '+$100.00',
          description: 'Refund',
        },

      ],
      cardList: [
        {
          title: 'Free',
          price: '$0',
          action: 'Get Started',
          features: ['1 Agent', '100 Messages', 'Basic Support'],
          isRecommended: false,
        },
        {
          title: 'Pro',
          price: '$49',
          action: 'Get Started',
          features: ['5 Agents', '5000 Messages', 'Priority Support'],
          isRecommended: true,
        },
        {
          title: 'Enterprise',
          price: 'Custom',
          action: 'Contact Us',
          features: ['Unlimited Agents', 'Unlimited Messages', 'Dedicated Support'],
          isRecommended: false,
        }
      ],
      payTypeList: [
        { 'iconName': 'i-wechat', 'title': 'Wechat Pay', 'content': 'Pay securely using your wechat account.' },
        { 'iconName': 'i-alipay', 'title': 'Alipay', 'content': 'Pay securely using your Alipay account.' },
        { 'iconName': 'i-paypal', 'title': 'Paypal', 'content': 'Pay securely using your PayPal account.' },
      ]
    }
  },
  mounted() {
    //this.ruleFormRef = this.$refs.ruleFormRef;

  },
  methods: {



  }
}
</script>

<style scoped>
.upload-demo {
  width: 100%;
}

.compTitle {
  margin: 0 auto;
  width: 90%;
  font-family: Inter, Inter;
  font-weight: bold;
  font-size: 32px;
  color: #0F141A;
  line-height: 40px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.itemTitle {
  margin: 10px auto;
  width: 90%;
  font-family: Inter, Inter;
  font-weight: bold;
  font-size: 22px;
  color: #0F1417;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.demo-ruleForm {
  margin: 0 auto;
  width: 90%;
}

.tableContent {
  margin: 0 auto;
  width: 90%;
}

:deep() .el-table__body td.el-table__cell {
  height: 72px;
}

.card-container {
  margin: 10px auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-card {
  margin-bottom: 20px;
  border-radius: 20px;
}

.card-container {
  display: flex;
  gap: 20px;
}

.card-item {
  width: 300px;
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  flex-direction: column;
}

.card-title span {
  font-size: 24px;
  font-weight: bold;
}
.recommended { 
    position: relative;
    width: 150px;
    height: 30px;
    float: right;
    line-height: 30px;
    background-color: #548bc1;
    border-radius: 15px;
    right: -65px;
    top: 5px;
}
.card-price {
  font-size: 18px;
  color: #666;
}

.card-action {
  background-color: #f0f0f0;
  /* padding: 5px 10px; */
  border-radius: 20px;
  color: #333;
  font-size: 20px;
  font-weight: bolder;
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.card-feature {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-feature .el-icon {
  color: #1989fa;
}

.payList {
  margin: 0 auto;
  width: 90%;
}

.payIcon {
  width: 48px;
  height: 48px;
  background: #EBEDF2;
  border-radius: 8px 8px 8px 8px;
  display: flex;
  align-content: flex-end;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
.payItem {
    display: flex;
    margin-bottom: 20px;
}
span.i-icon {
  display: flex;
}
.payTitle {
    font-size: 16px;
    font-weight: 500;
}
</style>